* {
	margin: 0;
	padding: 0;
}

.nav {
	background: rgba(255, 255, 255, .5);
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
	box-shadow: 0 0 10px #b4b4b4;
	-moz-box-shadow: 0 0 10px #b4b4b4;
	width: 100%;
	height: 40px;
	position: absolute;
	display: table;
	top: 0;
	z-index: 10;
	transition: all .2s;
	text-align: center;
	font-family: ColaCare;
}

.nav-mobile-content {
	margin: 0 auto;
}


.nav-mobile-content a {
	margin: 0 auto 5px 5px;
	float: left;
}

.nav-mobile-content a img {
	width: 30px;
	height: 30px;
	text-align: center;
}

.nav-mobile-content a p {
	font-size: 10px;
	text-align: center;
}

.header_main {
	font-family: ColaCare;
	font-size: 32px;
}

@font-face {
	font-family: ColaCare;
	src: url(../fonts/ColaCare.TTF);
}

@font-face {
	font-family: HarmonyOS-Sans;
	src: url(../fonts/HarmonyOS-Sans.ttf);
}

.index-banner {
	background: url(../images/index/台儿庄古城.jpg) no-repeat;
	height: 100vh;
	background-size: cover;
	background-position: center;
}

.banner-content h1 {
	margin-bottom: 10px;
	font-family: ColaCare;
	font-size: 60px;
	text-shadow: #AAAAAA 10px 10px 10px;
}

.banner-content p {
	font-family: ColaCare;
	font-size: 30px;
	text-shadow: #AAAAAA 10px 10px 10px;
	margin-bottom: 10px;
}

.banner-mask {
	width: 100%;
	height: 100%;
	background: rgba(30, 30, 30, .15);
	z-index: 1;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;

}
